<template>
  <div class="newsong">
    <div class="filter">
      <span class="title">语言：</span>
      <ul class="tab-wrap">
        <li v-for="item,index in catlist"
            :key="index"
            :class="[item.name===cat?'tab-item action':'tab-item']"
            @click="changeMusicListCat(item.name,item.type)">
          {{item.name}}
        </li>
      </ul>
    </div>
    <div class="song-cards">
      <songitem v-for="item,index in songlist"
                :key="index"
                :data='item'
                :id='item.id'
                :order="index+1"
                :name='item.name'
                :author='item.artists[0].name'
                :album='item.album.name'
                :time='item.bMusic.playTime'
                :img='item.album.picUrl'></songitem>
    </div>
  </div>
</template>
<script>
import songitem from '@/components/songitem'
import { getNewSongs } from '@/network/newsongs'
export default {
  components: {
    songitem
  },
  data () {
    return {
      // 所有分类
      catlist: [
        { name: '全部', type: 0 },
        { name: '华语', type: 7 },
        { name: '欧美', type: 96 },
        { name: '日本', type: 8 },
        { name: '韩语', type: 16 }
      ],
      // 当前选中分类
      cat: '全部',
      type: '0',
      // 歌曲列表
      songlist: []
    }
  },
  created () {
    this.getNewSongs()
  },
  methods: {
    changeMusicListCat (cat, type) {
      this.cat = cat
      this.type = type
      this.getNewSongs()
    },
    getNewSongs () {
      getNewSongs(this.type).then(res => {
        if (!res || res.code !== 200) { return this.$message.error('请求失败!') }
        this.songlist = res.data
      })
    }
  }
}
</script>
 <style lang='less' scoped>
.newsong {
  .filter {
    display: flex;
    align-items: center;
    font-size: 0.087848rem;
    color: #7f7f81;
    .title {
      font-size: 0.102489rem;
      margin: 0 0.087848rem;
      padding: 0.087848rem 0;
      white-space: nowrap;
    }
    .tab-wrap {
      display: flex;
      padding: 0;
      .tab-item {
        margin: 0 0.087848rem;
        padding: 0.087848rem 0;
        white-space: nowrap;
        cursor: pointer;
        &:hover {
          color: #f55050;
        }
      }
      .action {
        color: red;
      }
    }
  }
}
</style>
